<template>
  <div class="user">

    <template v-if="user_status">
      欢迎您，<span class="username">{{ username }}</span>
      <nuxt-link class="logout" to="/logout">退出</nuxt-link>
    </template>
    <template v-else>
      <nuxt-link class="login" to="/login">立即登陆</nuxt-link>
      <nuxt-link class="register" to="/register">注册</nuxt-link>
    </template>

  </div>

</template>

<script>
export default {
  name: "user",
  data() {
    return {
      user_status: true,
      username: "fovegage"
    }
  }
}
</script>

<style scoped lang="scss">
.user {
  float: right;
  z-index: 999;
  color: #666;
  font-size: 12px;

  .username {
    color: #31BBAC;
    cursor: pointer;
  }

  .login, .logout,
  .register {
    line-height: 40px;
    color: #999;
    margin: 0 5px;

    &.login {
      color: #31BBAC;
      margin: 0 5px 0 20px;
    }

    &:hover {
      color: #31BBAC;
    }
  }
}
</style>
